import { useState } from 'react'

function App() {
  // 注意：useState 的初始值只会在组件第一次渲染的时候生效，
  // 以后的每一次渲染 useState 都是获取到最新的状态，React 组件会记住每次最新的状态值

  /**
   * 函数组件使用 useState hook 后的执行过程：
   *
   * 组件第一次渲染：
   * 1. 从头开始执行该组件的代码逻辑
   * 2. 调用 useState(0) 将传入的参数作为初始值
   * 3. 渲染组件，组件内部获取到状态的 count 值
   *
   * 组件第二个渲染：
   * 1. 调用 setCount 修改状态，状态发生改变，组件会重新渲染
   * 2. 组件重新渲染，会再次执行函数组件中的代码逻辑
   * 3. 再次调用 useState(0)，此时 React 内部会拿到最新的状态值(更改后的值)而非初始值
   * 4. 再次渲染组件，此时状态是最新的，是更新以后的数据
   */

  const [count, setCount] = useState(0)

  const updateCount = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <h4>根组件</h4>
      <p>{count}</p>
      <button onClick={updateCount}>更新 count</button>
    </div>
  )
}

export default App
